<script setup>
defineOptions({
  name: 'codeSpriteIndex'
})
import { useGptMessageStore } from '@/stores/index.js'

import { useRuncode } from '@/hooks/useRuncode.js'
const msgStore = useGptMessageStore()

// 发送消息给服务端模块

const { handleSendMsg } = useRuncode()
</script>

<template>
  <aside>
    <titleVue :content="'编程精灵'"></titleVue>
    <section class="container">
      <!-- <manageBox></manageBox> -->
      <inputBox @keyup.enter="handleSendMsg"></inputBox>
      <section class="content">
        <ul>
          <li v-for="(item, index) in msgStore.messagesList" :key="index">
            <messageBox :message="item.message" :isTeacher="item.isTeacher"></messageBox>
          </li>
        </ul>
      </section>
    </section>
  </aside>
</template>

<style lang="less" scoped>
aside {
  margin-top: 5px;
  margin-left: 13px;
  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 50px);
    // background-color: pink;
    .content {
      width: 90%;
      height: 80%;
      overflow: auto;
      // background-color: skyblue;
      li {
        list-style-type: none;
      }
    }
  }
}
</style>
